<template>
  <Transfer
      :data="data"
      :target-keys="targetKeys"
      :list-style="listStyle"
      :titles="['未分配角色', '已分配角色']"
      filterable
      :filter-method="filterMethod"
      @on-change="handleChange" />
</template>
<script>
export default {
  props: {
    userId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      data: [],
      targetKeys: [],
      listStyle: {
        height: '500px',
      }
    }
  },
  created() {
    this.showData();
  },
  methods: {
    showData() {
      this.$api.queryRolesByUserId(this.userId).then(({data: ret}) => {
        if (ret.status === "10000") {
          this.data = ret.data.map(m => ({key: m.id, label: m.name}));
          this.targetKeys = ret.data.filter(m => m.checked).map(m => m.id);
        }
      })
    },
    handleChange(newTargetKeys) {
      this.targetKeys = newTargetKeys;
    },
    filterMethod(data, query) {
      return data.label.indexOf(query) > -1;
    }
  }
}
</script>

<style>
.ivu-transfer {
  text-align: center;
}

.ivu-transfer-list-footer {
  border: none;
}

.ivu-transfer-list-content {
  text-align: left;
}
</style>
